<template>
  <div id="app">
    <!-- 门店管理 -->
    <hose :obj.flag="false">
      <template #default>
        <p class="Span"><span>门店管理</span></p>
        <!-- 内容 -->
        <div class="content">
          <div class="left">
            <div class="left1">
              <p>
                <span>门店名称</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-input
                class="Inp"
                v-model="input1"
                placeholder="请输入门店名称"
              />
            </div>
            <div>
              <p>
                <span>门店位置</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <el-input
                :value="stores.inpVal"
                class="Inp"
                :placeholder="input2"
              />
            </div>
            <div>
              <p>
                <span>门店LOGO</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <img :src="src1" alt="" />
              <el-upload
                v-show="images11"
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :limit="1"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                <span style="font-size: 10px; margin-top: 20px"
                  >点击上传LOGO</span
                >
                <template #file="{ file }">
                  <div>
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <el-icon>
                          <Download />
                        </el-icon>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </span>
                    </span>
                  </div>
                </template>
              </el-upload>
            </div>
            <div>
              <p>
                <span>门店照片</span>
                <span style="color: #f5365c">*</span>
                <span>:</span>
              </p>
              <div class="Img">
                <!-- 多条数据就循环生成门店图片 <img :src="item" alt="" v-for="item in scr2" key="item" /> -->
                <img :src="scr2" alt="" />
                <el-upload
                  v-show="images11"
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                >
                  <el-icon>
                    <Plus />
                  </el-icon>
                  <span style="font-size: 10px; margin-top: 20px"
                    >点击上传图片</span
                  >
                  <template #file="{ file }">
                    <div>
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleDownload(file)"
                        >
                          <el-icon>
                            <Download />
                          </el-icon>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                        >
                          <el-icon>
                            <Delete />
                          </el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="right">
            <p><span>点击地图选择你的门店位置</span></p>

            <div class="DiTu">
              <InitMap :flag="false"></InitMap>
            </div>
            <div class="Button">
              <button @click="Reset">重置</button>
              <button @click="preservation">保存</button>
            </div>
          </div>
        </div>
      </template>
    </hose>
  </div>
</template>

<script setup>
// 引入公共组件
import hose from "../../components/hose.vue";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// 查询所有上门回收的店铺 接口
import { list } from "../../api/index.js";
// 引入地图组件
import InitMap from "../../components/InitMap.vue";
// 引入 pinia 公共状态管理
import { useCounterStore } from "../../stores/counter.js";
// 激活pinia
const stores = useCounterStore();
const disabled = ref(false);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const input1 = ref("OMINI回收矿业大学店");
const input2 = ref("");
const ImgZuoBiao = ref(null);
const Top = ref("50px");
const Left = ref("80px");
const images11 = ref(true);
// 门店 logo 图片
const src1 = ref();
// 门店照片
const scr2 = ref([]);

// 这下面的是 图片上传验证
const handleRemove = (file) => {
  console.log(file);
};
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
  console.log(file);
};
const handleDownload = (file) => {
  console.log(file);
};
const wwwww = (event) => {
  console.log(event.target.getBoundingClientRect());
};

// 在初始化后请求上门回收的店铺接口
const sname = ref();
const position = ref("");
list()
  .then((res) => {
    console.log(res);
    const Arr = res.data.data.data[0];
    console.log(Arr);
    sname.value = Arr.sname;
    position.value = Arr.position;

    input1.value = Arr.sname;
    input2.value = Arr.position;
    src1.value = Arr.logo;
    scr2.value = Arr.photo;
    console.log(scr2.value);
  })
  .catch((error) => {
    console.log(error);
  });

// 点击重置
const Reset = () => {
  console.log(position.value);
  input1.value = sname.value;
  input2.value = position.value;
  images11.value = false;
};
// 点击保存
const preservation = () => {
  ElMessageBox.confirm("你确定要修改保存吗?", "修改门店信息", {
    confirmButtonText: "确认",
    cancelButtonText: "返回",
    type: "warning",
  }).then(() => {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
  });
};
</script>

<style lang="less" scoped>
.Span {
  span {
    display: block;
    padding: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    font-size: 20px;
    font-weight: 700;
  }
}

.left1 {
  margin-top: 20px;
}

.content {
  display: flex;

  .left {
    padding: 0 0;

    width: 50%;

    > div {
      display: flex;
      align-items: center;
      margin-bottom: 18px;

      p {
        width: 120px;
        text-align: right;
        margin-right: 20px;
      }

      .Inp {
        width: 300px;
        font-family: "Microsoft YaHei UI";
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        background-color: transparent;
      }

      img {
        margin-right: 10px;
        width: 100px;
        height: 100px;
      }

      .Img {
        display: flex;
        flex-wrap: wrap;
        width: 400px;

        img {
          margin-bottom: 10px;
        }
      }
    }

    .backstage {
      width: 350px;
      height: 350px;
      background-color: rgba(68, 102, 136, 0.1);
      margin: 100px auto;

      h2 {
        text-align: center;
      }
    }
  }

  .right {
    padding: 20px 10px 10px 0;
    width: 50%;

    P {
      margin-bottom: 10px;
    }

    .DiTu {
      position: relative;
      height: 80%;
      width: 90%;

      img:first-child {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      img:nth-of-type(2) {
        position: absolute;
        right: 10px;
        bottom: 30px;
      }

      img:nth-of-type(3) {
        position: absolute;
      }
    }

    .Button {
      position: absolute;
      bottom: 50px;
      right: 80px;

      button:nth-of-type(1) {
        padding: 10px 20px;
        margin-right: 10px;
        border-radius: 5px;
        color: rgba(95, 114, 226, 1);
        border: 1px solid rgba(95, 114, 226, 1);
      }

      button:nth-of-type(1):hover {
        color: #ffffff;
        background-color: rgba(95, 114, 226, 1);
      }

      button:nth-of-type(2) {
        padding: 10px 20px;
        border-radius: 5px;
        color: #ffffff;
        border: 1px solid rgba(95, 114, 226, 1);
        background-color: rgba(95, 114, 226, 0.7);
      }

      button:nth-of-type(2):hover {
        background-color: rgba(95, 114, 226, 1);
      }
    }
  }
}
</style>
